<template>
  <a-modal
    v-model="isShow"
    :title="title"
    :width="width"
    :confirm-loading="loading"
    :cancel-text="cancelText"
    :ok-text="okText"
    :ok-type="okType"
    :footer="hideFooter ? null : undefined"
    :destroy-on-close="destroyOnClose"
    :closable="closable"
    @afterClose="afterClose"
    @ok="$emit('ok')"
  >
    <template slot="title">
      <slot name="title"/>
    </template>
    <slot />
    <template slot="footer">
      <slot name="footer"/>
    </template>
  </a-modal>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'

@Component({
  name: 'ComGlobalModel'
})
export default class ComGlobalModel extends Vue {
  @Prop({ type: String }) title?: string
  @Prop({ type: String, default: '确定' }) okText!: string
  @Prop({ type: String, default: '取消' }) cancelText!: string
  @Prop({ type: String, default: 'primary' }) okType!: string
  @Prop({ type: String, default: '700px' }) width!: string
  @Prop({ type: Boolean, default: false }) hideFooter!: string
  @Prop({ type: Boolean, default: true }) destroyOnClose!: boolean
  @Prop({ type: Boolean, default: true }) closable!: boolean


  isShow = false
  loading = false

  show () {
    this.isShow = true
    this.loading = false
  }

  close () {
    this.isShow = false
  }

  showLoading () {
    this.loading = true
  }

  hideLoading () {
    this.loading = false
  }

  afterClose () {
    this.$emit('afterClose')
  }
}
</script>

<style scoped></style>
